<template>
  <!-- 备件表单弹窗 -->
  <div>
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      :destroy-on-close="true"
      :width="!props.isReadonly ? '850px' : '850px'"
      draggable
      align-center
      @close="closeDialog"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="140"
        v-show="!props.isReadonly"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="备件编号" prop="spareCode">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.spareCode"
                placeholder="请输入备件编号"
                clearable
              />

              <span v-else>{{ formData.spareCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备件名称" prop="spareNmae">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.spareNmae"
                placeholder="请输入备件名称"
                clearable
              />

              <span v-else>{{ formData.spareNmae }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备件型号" prop="modelNo">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.modelNo"
                placeholder="请输入备件型号"
                clearable
              />

              <span v-else>{{ formData.modelNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备件类型" prop="spareType">
              <el-select
                style="width: 100%"
                v-if="!props.isReadonly"
                v-model="formData.spareType"
                placeholder="请选择件"
                clearable
              >
                <el-option
                  v-for="item in dictionaryStore.filterDictList('SpareType')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

              <span v-else>{{
                dictionaryStore.filterDictName("SpareType", formData.spareType)
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备件种类" prop="spareKindId">
              <el-tree-select
                v-if="!props.isReadonly"
                placeholder="请选择备件种类"
                v-model="formData.spareKindId"
                :data="partTypeList"
                node-key="id"
                :props="{
                  label: 'kindName',
                  value: 'id',
                  children: 'nodes',
                }"
                :render-after-expand="false"
                :check-strictly="true"
                style="width: 350px"
                clearable
              />
              <span v-else>{{ formData.spareKindName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备种类" prop="equipTypeId">
              <el-tree-select
                v-if="!props.isReadonly"
                placeholder="请选择设备种类"
                v-model="formData.equipTypeId"
                :data="catalogList"
                node-key="id"
                :props="{
                  label: 'assetTypeName',
                  value: 'id',
                  children: 'nodes',
                }"
                :render-after-expand="false"
                :check-strictly="true"
                style="width: 350px"
                clearable
                @change="changeEquipType"
              />
              <span v-else>{{ formData.assetTypeName }}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="设备">
              <el-select
                v-model="formData.detailIds"
                multiple
                collapse-tags
                collapse-tags-tooltip
                placeholder="请选择设备"
                filterable
                style="width: 100%"
                :disabled="formData.equipTypeId == ''"
                @focus="openSelectDialog()"
              >
                <el-option
                  v-for="item in formData.details"
                  :key="item.assetId"
                  :label="item.assetName"
                  :value="item.assetId"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="12">
          <el-form-item label="品牌" prop="brandId">
            <el-select
              v-model="formData.brandId"
              placeholder="请选择品牌"
              clearable
              v-if="!props.isReadonly"
              style="width: 350px"
              @change="changeBrand"
            >
              <el-option
                v-for="item in brandList"
                :key="`${item.id}`"
                :label="`${item.brandCode}-${item.brandName}`"
                :value="`${item.id}`"
              />
            </el-select>
            <span v-else>{{ formData.brandName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="制造商" prop="makerId">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.makerName"
              placeholder="请输入制造商"
              clearable
              disabled
            />

            <span v-else
              >{{ formData.makerCode }}-{{ formData.makerName }}</span
            >
          </el-form-item>
        </el-col> -->
          <el-col :span="12">
            <el-form-item label="备件价格" prop="sparePice">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.sparePice"
                placeholder="请输入备件价格"
                clearable
              />

              <span v-else>{{ formData.sparePice }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备件单位" prop="spareUnit">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.spareUnit"
                placeholder="请输入备件单位"
                clearable
              />

              <span v-else>{{ formData.spareUnit }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否是关键备件" prop="isLinchpin">
              <el-select
                v-if="!props.isReadonly"
                v-model="formData.isLinchpin"
                clearable
                style="width: 350px"
                placeholder="请选择是否是关键备件"
              >
                <el-option
                  v-for="item in dictionaryStore.filterDictList('YesNo')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

              <span v-else
                >{{
                  dictionaryStore.filterDictName("YesNo", formData.isLinchpin)
                }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否易损备件" prop="isVulnerable">
              <el-select
                style="width: 350px"
                v-if="!props.isReadonly"
                v-model="formData.isVulnerable"
                clearable
                placeholder="请选择是否易损备件"
              >
                <el-option
                  v-for="item in dictionaryStore.filterDictList('YesNo')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

              <span v-else
                >{{
                  dictionaryStore.filterDictName("YesNo", formData.isVulnerable)
                }}
              </span>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.remarks"
                type="textarea"
                placeholder="请输入备注"
                :rows="2"
                show-word-limit
                maxlength="250"
                clearable
              />
              <span v-else>{{ formData.remarks }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否停用" prop="enabled">
              <el-radio-group
                v-model="formData.enabled"
                v-if="!props.isReadonly"
              >
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>

              <span v-else>{{ formData.enabled == 1 ? "启用" : "停用" }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-divider content-position="left">设备选择</el-divider> -->
        <div>
          <el-row>
            <el-col :span="8" class="flex justify-start">
              <div class="lh-[34px] text-[15px] font-bold">设备选择</div>
            </el-col>
            <el-col :span="16" class="flex justify-end">
              <el-button
                type="success"
                plain
                @click="openSelectDialog"
                class="mb-[10px] mt-[0px]"
              >
                <i-ep-plus />
                新增</el-button
              >
            </el-col>
          </el-row>
          <el-row class="formTable">
            <el-col :span="24">
              <el-table :data="formData.details" border max-height="260">
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="70"
                />
                <el-table-column
                  label="设备名称"
                  props="assetName"
                  align="center"
                  min-width="180"
                >
                  <template #default="scope">
                    {{ scope.row.assetName }}
                  </template>
                </el-table-column>
                <el-table-column
                  props="assetCode"
                  label="设备编号"
                  align="center"
                  min-width="120"
                >
                  <template #default="scope">
                    {{ scope.row.assetCode }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="数量"
                  props="usageQuantity"
                  min-width="150"
                >
                  <template #default="{ $index, row }">
                    <el-form-item
                      :prop="'details.' + $index + '.usageQuantity'"
                      :rules="rules.usageQuantity"
                      label-width="0"
                    >
                      <el-input-number
                        v-if="!props.isReadonly"
                        v-model="row.usageQuantity"
                        :step="1"
                        :min="1"
                        style="width: 100%"
                      />
                      <span v-else>{{ row.usageQuantity }}</span>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="操作"
                  width="100"
                  v-if="!props.isReadonly"
                >
                  <template #default="scope">
                    <el-button
                      type="danger"
                      link
                      @click.stop="handleDelete(scope.$index)"
                      class="mt-[0px]"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <el-descriptions
        v-show="props.isReadonly"
        class="margin-top"
        title=""
        :column="2"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">备件编号</div>
          </template>
          {{ formData.spareCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">备件名称</div>
          </template>
          {{ formData.spareNmae }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">备件类型</div>
          </template>
          {{ dictionaryStore.filterDictName("SpareType", formData.spareType) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">备件种类</div>
          </template>
          {{ formData.spareKindName }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">设备种类</div>
          </template>

          {{ formData.assetTypeCode }}{{ formData.assetTypeName ? "-" : ""
          }}{{ formData.assetTypeName }}
        </el-descriptions-item>
        <!-- <el-descriptions-item :span="2">
          <template #label>
            <div class="cell-item">设备</div>
          </template>
          <div v-if="formData.details && formData.details.length">
            <div
              v-for="(item, index) in formData.details"
              :key="index"
              class="float-left"
            >
              {{ item.assetName }}
              <span v-if="index != formData.details.length - 1">、</span>
            </div>
          </div>
        </el-descriptions-item> -->

        <!-- <el-descriptions-item>
          <template #label>
            <div class="cell-item">品牌</div>
          </template>
          {{ formData.brandCode }}{{ formData.brandName ? "-" : ""
          }}{{ formData.brandName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">制造商</div>
          </template>

          {{ formData.makerCode }}{{ formData.makerName ? "-" : ""
          }}{{ formData.makerName }}
        </el-descriptions-item> -->
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">备件价格</div>
          </template>
          {{ formData.sparePice }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">备件单位</div>
          </template>
          {{ formData.spareUnit }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">是否是关键备件</div>
          </template>
          <el-tag v-if="formData.isLinchpin == '1'" type="success">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">是否是易损备件</div>
          </template>
          <el-tag v-if="formData.isVulnerable == '1'" type="success">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>
            <div class="cell-item">是否启用</div>
          </template>
          <el-tag v-if="formData.enabled === 1" type="">启用</el-tag>
          <el-tag v-else type="info">停用</el-tag>
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">备注</div>
          </template>
          <div style="width: 100%; word-break: break-all">
            {{ formData.remarks || "暂无备注" }}
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <div v-if="props.isReadonly">
        <el-row class="mt-[15px] mb-[5px]">
          <el-col :span="8" class="flex justify-start">
            <div class="lh-[34px] text-[15px] font-bold">设备选择</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table :data="formData.details" border max-height="260">
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="70"
              />
              <el-table-column
                label="设备名称"
                props="assetName"
                align="center"
                min-width="250"
              >
                <template #default="scope">
                  {{ scope.row.assetName }}
                </template>
              </el-table-column>
              <el-table-column
                props="assetCode"
                label="设备编号"
                align="center"
                min-width="150"
              >
                <template #default="scope">
                  {{ scope.row.assetCode }}
                </template>
              </el-table-column>
              <el-table-column
                label="数量"
                props="usageQuantity"
                min-width="150"
                align="center"
              >
                <template #default="scope">
                  {{ scope.row.usageQuantity ?? "" }}
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="!props.isReadonly"
            type="primary"
            :loading="loading"
            @click="handleSubmit"
            >确 定</el-button
          >
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <SelectDeviceDialog-Eam
      v-model:visible="selectDialog.visible"
      :data="selectDialog.data"
      :assetTypeId="formData.equipTypeId"
      :isMultiple="true"
      @echo-info="changeVisible"
    />
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "CommonSparepartEdit",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  assetKind: {
    type: Number,
    default: null,
  },
});

function changeEquipType() {
  formData.details = [];
  formData.detailIds = [];
}

/** 删除行 */
const isValidated = ref(false);
const handleDelete = (index: any) => {
  formData.details.splice(index, 1);
  isValidated.value && formRef.value.validate(() => {});
};
//  点击设备
function openSelectDialog() {
  selectDialog.visible = true;
  if (formData.details && formData.details.length) {
    let option1 = formData.details.map((e) => {
      return {
        id: e.assetId,
        assetName: e.assetName,
        assetCode: e.assetCode,
      };
    });

    selectDialog.data = option1;
  } else {
    selectDialog.data = [];
  }
}
//设备显隐
const selectDialog = reactive<DialogOption>({
  visible: false,
  data: [],
});
// 设备选择确认后的回调函数
const changeVisible = (options: any) => {
  if (options && options.length) {
    let option1 = options.map((e) => {
      return {
        assetId: e.id,
        assetName: e.assetName,
        assetCode: e.assetCode,
        usageQuantity: 1,
      };
    });

    const details_elder = JSON.parse(JSON.stringify(formData.details ?? []));
    const newList = [];
    for (let i = 0; i < option1.length; i++) {
      let isExist = false;
      const obj = details_elder.find(
        (item) => item.assetId == option1[i].assetId
      );
      if (obj) {
        newList.push(obj);
      } else {
        newList.push(option1[i]);
      }
    }

    formData.details = newList;
    let list = [];
    formData.details.map((e) => list.push(e.assetId));
    formData.detailIds = list;
  } else {
    formData.details = [];
    formData.detailIds = [];
  }
};

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);
watch(
  () => props.assetKind,
  (newVal: number) => {},
  {
    immediate: true,
  }
);
const rules = reactive({
  spareCode: [
    { required: true, message: "请输入备件编号", trigger: "blur" },
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  spareNmae: [
    { required: true, message: "请输入备件名称", trigger: "blur" },
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  spareType: [{ required: true, message: "请输入备件类型", trigger: "change" }],
  equipTypeId: [
    { required: true, message: "请输入设备种类", trigger: "change" },
  ],
  spareKindId: [
    { required: true, message: "请输入备件种类", trigger: "change" },
  ],
  usageQuantity: [{ required: true, message: "请输入数量", trigger: "change" }],
  makerId: [{ required: true, message: "请输入制造商", trigger: "change" }],
  brandId: [{ required: true, message: "请输入资产品牌", trigger: "change" }],
  isLinchpin: [
    { required: true, message: "请输入关键备件", trigger: "change" },
  ],
  isVulnerable: [
    { required: true, message: "请输入易损备件", trigger: "change" },
  ],
  sparePice: [
    {
      trigger: "blur",
      validator: validator1,
    },
  ],
  remarks: [
    { min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur" },
  ],
  enabled: [],
});

function validator1(rule, value, callback: (a?: any) => {}) {
  if (!value) {
    //先判断空可以过
    // callback(new Error("请输入8位整数2位小数"));

    return true;
  } else {
    if (/^\d{1,4}(\.\d{0,2})?$/.test(value)) {
      //验证正整数和0的正则
      return true;
    } else {
      callback(new Error("请输入4位整数2位小数"));
    }
  }
}

const formRef = ref(ElForm);

let formData = reactive({
  assetKind: props.assetKind,
  id: "",
  version: "",
  spareCode: "",
  spareNmae: "",
  modelNo: "",
  spareType: "",
  equipTypeId: "",
  spareKindId: "",
  spareKindName: "",
  assetTypeName: "",
  assetTypeCode: "",
  makerId: "",
  makerName: "",
  makerCode: "",
  brandId: "",
  brandName: "",
  brandCode: "",
  isLinchpin: "",
  isVulnerable: "",
  sparePice: "",
  spareUnit: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: 1,
  deleted: "",
  details: [],
  detailIds: [],
});

watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      const {
        id,
        version,
        assetKind,
        spareCode,
        spareNmae,
        modelNo,
        spareType,
        equipTypeId,
        spareKindId,
        spareKindName,
        assetTypeName,
        assetTypeCode,
        makerId,
        makerName,
        makerCode,
        brandId,
        brandName,
        brandCode,
        isLinchpin,
        isVulnerable,
        sparePice,
        spareUnit,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdateTime,
        lastUpdatedUserId,
        lastUpdatedUserName,
        enabled,
        deleted,
        details,
        detailIds,
      } = newVal;
      Object.assign(formData, {
        id,
        version,
        assetKind,
        spareCode,
        spareNmae,
        modelNo,
        spareType,
        equipTypeId,
        spareKindId,
        spareKindName,
        assetTypeName,
        assetTypeCode,
        makerId,
        makerName,
        makerCode,
        brandId,
        brandName,
        brandCode,
        isLinchpin,
        isVulnerable,
        sparePice,
        spareUnit,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdateTime,
        lastUpdatedUserId,
        lastUpdatedUserName,
        enabled,
        deleted,
        details,
        detailIds,
      });

      console.log("formData", formData);
      if (details && details.length) {
        let list = [];
        details.map((e) => list.push(e.assetId));
        formData.detailIds = list;
      } else {
        formData.detailIds = [];
      }
      changeBrand(brandId);
    } else {
      formData.enabled = 1;
      formData.assetKind = props.assetKind;
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  console.log(formData.assetKind);
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  formData.version = "";
  formData.assetKind = props.assetKind;
  formData.spareCode = "";
  formData.spareNmae = "";
  formData.modelNo = "";
  formData.spareType = "";
  formData.equipTypeId = "";
  formData.spareKindId = "";
  formData.spareKindName = "";
  formData.assetTypeName = "";
  formData.assetTypeCode = "";
  formData.makerId = "";
  formData.makerName = "";
  formData.makerCode = "";
  formData.brandId = "";
  formData.brandName = "";
  formData.brandCode = "";
  formData.isLinchpin = "";
  formData.isVulnerable = "";
  formData.sparePice = "";
  formData.spareUnit = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.enabled = 1;
  formData.deleted = "";
  formData.details = [];
}

const loading = ref(false);

/** 备件保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      await request({
        url: "/eam/eamsparepart/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
      isValidated.value = false;
    } else {
      isValidated.value = true;
    }
  });
}

// 目录树
const catalogList: any = ref([]);

// 获取内容树数据
const getCAtalogList = async () => {
  // 获取内容树
  await request({
    url: "eam/eamCommon/getAvailableTree",
    method: "POST",
    data: { assetKind: formData.assetKind },
  }).then((res) => {
    console.log(res.data);

    catalogList.value = res.data;
  });
};

// 目录树
const partTypeList: any = ref([]);

// 获取内容树数据
const getPartTypeList = async () => {
  // 获取内容树
  await request({
    url: "/eam/parePartsType/getTree",
    method: "POST",
    data: { assetKind: formData.assetKind },
  }).then((res) => {
    console.log(res.data);

    partTypeList.value = res.data;
  });
};

// 获取资产品牌数据
const brandList: any = ref([]);
const getBrandList = async () => {
  await request({
    url: "eam/eamassetbrand/getList",
    method: "post",
    data: { assetKind: formData.assetKind },
  }).then((res) => {
    brandList.value = res.data;
    console.log(res.data);
  });
};

// 选择品牌
const changeBrand = (e) => {
  formData.makerId = "";
  if (e) {
    brandList.value.forEach((element) => {
      if (e == element.id) {
        formData.makerId = element.makerId;

        formData.makerName = element.makerName;
      }
    });
  } else {
    formData.makerId = "";
    formData.makerName = "";
  }
};
onMounted(() => {
  getCAtalogList();
  getBrandList();
  getPartTypeList();
}),
  // 组件销毁时调用
  onBeforeUnmount(() => {
    visibleDialog.value = false;
    emit("change-visible", false);
  });
</script>
<style lang="scss" scoped>
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 160px;
}
:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
  min-width: 180px;
}
:deep(.el-divider--horizontal) {
  margin: 10px 0;
}

:deep(.formTable .el-table td.el-table__cell) {
  padding: 0;
}
:deep(.formTable .el-table .el-form-item) {
  margin: 13px 0;
}
:deep(.formTable .el-table .el-form-item__error) {
  padding-top: 1px !important;
  font-size: 11px !important;
}
:deep(.el-dialog__body) {
  padding: 20px;
}
</style>
